<template>
  <div class="form-container" >
    <el-tabs type="border-card">
        <p class="content-tit">导入模板下载</p>
        <a>点击此处下载</a>
        <p class="content-tit">单证导入销毁(请注意提交销毁的单证不能超过3000条)</p>
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
        <el-button type="primary">销毁导入</el-button>
        <p class="content-tit">导入信息查询</p>
        <el-form :model="formDatas" :rules="rule" ref="formDatas" label-position="right">
          <el-row type="flex" class="row-bg">
            <el-col :span="7">
              <el-form-item label="单证编码" :required="false" prop="type" size="small" label-width="120px">
                <el-select v-model="formDatas.code" clearable filterable placeholder="请选择">
                  <el-option value="001-测试一"></el-option>
                  <el-option value="002-测试二"></el-option>
                  <el-option value="003-测试三"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="单证版本" :required="false" prop="type" size="small" label-width="120px">
                <el-select v-model="formDatas.certifyEdition" clearable filterable placeholder="请选择">
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="导入状态" :required="false" prop="type" size="small" label-width="120px">
                <el-select v-model="formDatas.type" clearable filterable placeholder="请选择">
                  <el-option value="0-待导入"></el-option>
                  <el-option value="1-已导入"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" class="row-bg">
            <el-col :span="7">
              <el-form-item label="开始日期" prop="houseNum" size="small" :required="false" label-width="120px">
                <el-date-picker
                  size="small"
                  v-model="formDatas.Date"
                  type="date"
                  placeholder="选择日期"
                  :format="'yyyy-MM-dd'"
                  :value-format="'yyyy-MM-dd'">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="结束日期" prop="houseNum" size="small" :required="false" label-width="120px">
                <el-date-picker
                  size="small"
                  v-model="formDatas.Date"
                  type="date"
                  placeholder="选择日期"
                  :format="'yyyy-MM-dd'"
                  :value-format="'yyyy-MM-dd'">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" class="row-bg">
            <el-col align="left">
              <el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <p class="content-tit">
            <span @click="isShow('isShowList')" v-if='isShowList'>-</span>
            <span @click="isShow('isShowList')" v-else>+</span>导入信息
          </p>
          <el-table :data="dicTypeList" ref="checkTable" @selection-change="handleSelectionChange" class='table-common'
                    v-show="isShowList" size="mini" :highlight-current-row="true"
                    border>
            <el-table-column label="#" checked="selectionData"
                             type="selection"
                             min-width="6%">
            </el-table-column>
            <el-table-column label="序号"
                             type="index"
                             min-width="6%">
            </el-table-column>
            <el-table-column prop="dicTypeId" label="单证编码" min-width="10%" align="center"></el-table-column>
            <el-table-column prop="TypeDis" label="单证名称" min-width="15%" align="center"></el-table-column>
            <el-table-column prop="certifyEdition" label="单证版本" min-width="9%" align="center"></el-table-column>
            <el-table-column prop="TypeDis" label="单证起始号" min-width="15%" align="center"></el-table-column>
            <el-table-column prop="dicType" label="单证终止号" min-width="10%" align="center"></el-table-column>
            <el-table-column prop="TypeDis" label="数量" min-width="10%" align="center"></el-table-column>
            <el-table-column prop="TypeDis" label="经办人" min-width="15%" align="center"></el-table-column>
            <el-table-column prop="dicType" label="操作员" min-width="10%" align="center"></el-table-column>
            <el-table-column prop="TypeDis" label="导入状态" min-width="15%" align="center"></el-table-column>
            <el-table-column prop="TypeDis" label="导入日期" min-width="15%" align="center"></el-table-column>
            <el-table-column prop="dicType" label="导入时间" min-width="10%" align="center"></el-table-column>
            <el-table-column prop="TypeDis" label="导入机构" min-width="15%" align="center"></el-table-column>
            <el-table-column prop="dicType" label="导入失败原因" min-width="10%" align="center"></el-table-column>
          </el-table>
          <div class="mar15 " align="right" v-show="isShowList">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="publicPage.currentPage"
              :page-size="publicPage.perPage"
              layout="total, prev, pager, next, jumper"
              :total="publicPage.totalSize">
            </el-pagination>
          </div>
          <div class="ali-right">
            <el-button type="primary" @click="next">打印</el-button>
          </div>
        </div>
    </el-tabs>
  </div>


</template>

<script>

  export default {
    name: 'card-destory-import',
    components: {},
    data() {
      return {
        publicPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
        active: 0,
        isShowList: true,
        rule: {},
        dialogFormVisible: false,
        rptModeList: [{code: '0', codeName: '普通案件'}, {code: '1', codeName: 'APP案件'}], // 案件来源
        certificateType: [], // 证件类型
        flag: true, // 共享池数据显示标志
        flags: true, // 待核保池数据显示标志
        shape: '- ',
        shapes: '- ',
        /**/
        formDatas: {
          date: '2020-07-06',
          code: '',
          codes: '',
          num: '',
          state: '001',
          nums: '',
          depart: '86',
          address: '',
          name: '',
          names: '',
          type: '',
          ytype: '',
          ytypes: '',
          flag: '',
          personal: '',
          personals: '',
          notper: '',
          notpers: '',
          price: '',
          deadline: '',
          text: '',
          begin: '',
          ding: '',
          box: '',
          card: '',
          way: '',
          limit: '',
          length: '',
          departs: ''

        },
        formDatas1: {
          houseNum: '001',
          houseName: '库柜一',
          type: '类型一',
          state: '使用中',
          house: ''

        },
        dicTypeList: [
          {
            selectionData: true,
            dicTypeId: 'XW1233',
            dicType: '',
            TypeDis: '',
          },
          {
            selectionData: false,
            dicTypeId: 'WE2444',
            dicType: '',
            TypeDis: '',
          }
        ],
        /* 待核保池查询数据非空校验 */
        rules: {},
        selfData: [{
          checkbox: '口',
          houseNum: '001',
          houseName: '库柜一',
          type: '类型一',
          state: '使用中',
          house: ''
        }, {
          checkbox: '口',
          houseNum: '002',
          houseName: '库柜二',
          type: '类型二',
          state: '使用中',
          house: ''
        }], // 表中的数据
        selfList: [], // 分页
        /* 分页器 */
        pages: {
          currentPage: 1,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        }
      }
    },
    created() {
      this.getCpCode('idtype', 'certificateType')
      this.querySelfRegisterMission()
    },
    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      },
      /* 个人池查询按钮 */
      querySelfBtn(formDatas) {
        if (this.formDatas.idType === '' && this.formDatas.idNo !== '') {
          this.$message.error('请选择客户证件类型!')
          return
        }
        if (this.formDatas.idType !== '' && this.formDatas.idNo === '') {
          this.$message.error('请输入客户证件号码!')
          return
        }
        this.querySelfRegisterMission()
      },
      /* 点击申请按钮进行校验 */
      radioChange(row) {
        new Promise((resolve, reject) => {
          // apply(row).then(response => {
          //   const data = response.data
          //   if (data.code === 0) {
          //     this.$message.success(data.message)
          //     this.queryShareRegisterMission()
          //     this.querySelfRegisterMission()
          //   } else {
          //     this.$message.error(data.message)
          //   }
          //   resolve()
          // }).catch(error => {
          //   reject(error)
          // })
        })
      },
      // isShow() {
      //   if (this.flag) {
      //     this.flag = !this.flag
      //     this.shape = '+'
      //   } else {
      //     this.flag = !this.flag
      //     this.shape = '-'
      //   }
      // },
      // isShows() {
      //   if (this.flags) {
      //     this.flags = !this.flags
      //     this.shapes = '+'
      //   } else {
      //     this.flags = !this.flags
      //     this.shapes = '-'
      //   }
      // },
      isShow(val) {
        this[val] = !this[val]
      },
      handleCurrentChangeSingles(num) {
        // 个人工作池分页器事件
        this.formDatas.pageNum = num
        this.querySelfRegisterMission()
      },
      getPublicList() {
      },
      inquireSharedPool() {
      },
      tableRowClassName({row, rowIndex}) {
        if (row.countnum >= 5) {
          return 'bg01'
        }
      },
      // 申请按钮
      radioChanges(row) {
        this.$router.push({
          name: 'reportCase',
          query: {
            rptNo: row.rptNo,
            rgtNo: row.rgtNo,
            clmState: row.clmState
          }
        })
      },
      /** 新增立案按钮 */
      saveRegistration() {
        this.$router.push({
          name: 'reportCase'
        })
      },
      /** getCpCode公共方法 */
      getCpCode(code, array) {
        new Promise((resolve, reject) => {
          getCpCode(code).then(response => {
            const data = response.data
            if (data.code === 0) {
              if (array === 'certificateType') {
                data.body = data.body.filter((item) => {
                  return (item.code === '0' || item.code === '1' || item.code === '4' || item.code === '7' || item.code === 'B' || item.code === 'E' || item.code === 'G' || item.code === 'H' || item.code === 'I' || item.code === 'J')
                })
              }
              this[array] = data.body
            } else {
              this[array] = []
              this.$message.error(data.message)
            }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      querySelfRegisterMission() {
        new Promise((resolve, reject) => {
          queryselfmission(this.formDatas).then(response => {
            const data = response.data
            if (data.code === 0) {
              this.selfData = data.body.data
              this.pages.perPage = data.body.perPage
              this.pages.totalPage = data.body.totalPage
              this.pages.totalSize = data.body.totalSize
              this.pages.currentPage = data.body.currentPage
            } else {
              this.$message.error(data.message)
            }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      }
    },
    computed: {}
  }
</script>

<style scoped>

</style>
